<!--
 * @Author: 45654 2275061717@qq.com
 * @Date: 2022-10-21 14:59:08
 * @LastEditors: 45654 2275061717@qq.com
 * @LastEditTime: 2022-10-28 10:01:38
 * @FilePath: \实训三\小组餐饮平台项目\team-cooperation-project\src\pages\admin\info\article\Publish.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 表单区域 -->
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" class="input1" clearable />
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-select v-model="form.categoryId" placeholder="请选择" clearable>
          <el-option
            v-for="item in allCategory"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 封面上传 -->
      <el-form-item label="封面">
        <el-upload
          class="avatar-uploader"
          :action="uploadFileURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="form.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <!-- 封面上传结束 -->

      <!-- 富文本编辑器 -->
      <el-form-item label="正文" prop="content">
        <Tinymce v-model="form.content" />
      </el-form-item>
      <!-- 富文本编辑器结束 -->
      <el-form-item style="text-align:center" size="big">
        <el-button style="margin-right:50px" @click="$router.go(-1)">返回</el-button>
        <el-button type="primary" @click="onSubmit(form)">发布</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单区域结束 -->
  </div>
</template>
<script>
import { get, post } from '@/utils/request'
import { uploadFileURL } from '@/utils/config'
import Tinymce from '../../../../components/Tinymce'
export default {
  components: {
    Tinymce

  },
  data() {
    return {
      // 表单数据
      form: {},
      // 所有栏目分类
      allCategory: [],
      // 图片上传变量
      imageUrl: '',
      // 图片上传路径
      uploadFileURL,
      // 表单校验规则
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        categoryId: [{ required: true, message: '请选择栏目', trigger: 'blur' }],
        content: [{ required: true, message: '请输入文章内容' }]
      }
    }
  },
  created() {
    this.getAllCategory()
  },
  methods: {
    // 发布按钮事件
    onSubmit(form) {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          // 发送添加或者更新请求
          const res = await post('/article/saveOrUpdate', form)
          // console.log(form);
          this.$notify({
            type: 'success',
            message: res.message
          })
          this.$router.go(-1)
        } else {
          return false
        }
      })
    },

    // 获取所有栏目分类
    async getAllCategory() {
      const res = await get('/category/findAll')
      this.allCategory = res.data
      console.log(res.data)
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.cover = res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style lang="scss">
.input1 {
  width: 600px;
}
.el-form-item--small .el-form-item__content {
  display: inline-block;
}

.avatar-uploader {
  display: inline-block;
}
</style>
